import React from "react";
import { PageHeader, Form, Input, InputNumber, Button } from "antd";
import { useHistory } from "react-router-dom";
import "./style.css";
import axios from "axios";
import { message } from "antd";
import moment from "moment";

export default function Add_the_goods() {
  let history = useHistory();

  const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 16,
    },
  };
  /* eslint-disable no-template-curly-in-string */

  const validateMessages = {
    required: "${label} is required!",
    types: {
      email: "${label} is not a valid email!",
      number: "${label} is not a valid number!",
    },
    number: {
      range: "${label} must be between ${min} and ${max}",
    },
  };
  /* eslint-enable no-template-curly-in-string */

  const onFinish = (values) => {
    let key = Math.random();
    let times = moment().format("YYYY-MM-DD HH:mm:ss");

    let commodity = { id: key, time: times, key: key, ...values.user };

    const formData = new FormData();
    formData.append("4", values.user);
    axios({
      headers: {
        "Content-Type": "application/json",
      },
      method: "post",
      url: "http://localhost:3004/From_data",
      data: commodity,
      onUploadProgress: ({ total, loaded }) => {},
    }).then((res) => {
      console.log("text", res.status, res, res === res.status);
      // eslint-disable-next-line no-mixed-operators
      if ((res && res.status === 200) || 201) {
        // 响应成功的回调
        message.success("上传成功");
        history.go(-1);
      } else {
        // 响应失败
        message.error("上传失败");
      }
    });
  };

  return (
    <div>
      <PageHeader
        className="site-page-header"
        onBack={() => history.go(-1)}
        title="添加商品"
      />

      <Form
        {...layout}
        style={{ width: "500px", margin: "50px auto" }}
        name="nest-messages"
        onFinish={onFinish}
        validateMessages={validateMessages}
      >
        <Form.Item
          name={["user", "name"]}
          label="商品名称"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name={["user", "price"]}
          label="商品价格(元)"  
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name={["user", "weight"]}
          label="商品重量"
          rules={[
            {
              required: true,
              type: "number",
              min: 0,
              max: 1000,
            },
          ]}
        >
          <InputNumber />
        </Form.Item>
        <Form.Item
          wrapperCol={{ ...layout.wrapperCol, offset: 8 }}
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
